<template>
  <div>
    <van-nav-bar class="header" title="消息提醒"></van-nav-bar>
    <div class="main">
      <van-panel
        v-for="(item, index) in 2" :key="index"
        @click="toDetail"
        title="标题"
        desc="描述信息"
        status="状态"
        icon="fire"
        class="card">
        <div slot="header" class="msgHeader">
          <div class="msgTitle van-multi-ellipsis--l2">标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题</div>
          <div class="msgTip">
            <van-icon name="fire" />
            <div>新</div>
          </div>
        </div>
        <div slot="default">
          <van-cell-group>
            <van-cell center title="时间" value="">
              <van-icon slot="icon" name="clock-o" color="#56D7FF" style="margin-right: 5px;"/>
            </van-cell>
            <van-cell center title="消息类型" value="">
              <van-icon slot="icon" name="points" color="#FB74CF" style="margin-right: 5px;"/>
            </van-cell>
          </van-cell-group>
        </div>
        <div slot="footer" style="text-align: right">
          已读
        </div>
      </van-panel>
      <!-- <van-panel title="标题" desc="描述信息" status="状态" icon="">
        <div>内容</div>
      </van-panel> -->
    </div>
    <footer-btn></footer-btn>
  </div>
</template>

<script>
import {
  NavBar,
  Panel,
  Icon,
  Cell,
  CellGroup,
} from 'vant'
import footerBtn from '@/components/footerBtn'
import { lims_message_init } from '@/api/message'
export default {
  name: 'massage',
  components: {
    footerBtn,
    [NavBar.name]:NavBar,
    [Panel.name]:Panel,
    [Icon.name]:Icon,
    [Cell.name]:Cell,
    [CellGroup.name]:CellGroup,
  },
  created() {

  },
  data() {
    return {

    }
  },
  methods: {
    toDetail() {
      this.$router.push('/messagedetail')
    }
  }
}
</script>

<style scoped>
.msgHeader {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 10px 16px;
  height: 40px;
  line-height: 20px;
}
.msgTitle {
  flex-grow: 1;
  flex-shrink: 1;
}
.msgTip {
  width: 40px;
  flex-grow: 0;
  flex-shrink: 0;
  text-align: center;
  color: #ee0a24;
}
.card {
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  margin: 12px;
}
</style>